<template>
  <div class="jzd_content">
    <navTop :headTitle="headTitle" :showBack="showBack" :bkParam="bkParam" style="margin-bottom:2.5rem"></navTop>
    <div class="jzd_1">
      <span v-show="showaveter == 'S'">
        <img :src="root+$route.query.DOCTOR_PIC_URL" alt="">
      </span>
      <span>
        <p><b style="color:black">医生信息：</b>{{$route.query.docName}}&nbsp;{{$route.query.ZYDJ}}</p>
        <!-- <nuxt-link tag="p" :to="{path:'yuyue-doctorPage', query:{doctorId: $route.params.docInfo.DOCID}}">{{$route.params.docInfo.DOC_NAME}}&nbsp;{{$route.params.docInfo.ZYDJ}}<i class="iconfont icon-weibiaoti34" style="padding-left:6rem;float:right;font-size:1.5rem;color:#aaa"></i></nuxt-link> -->
      </span>
    </div>
    <div class="jzd_2">
      <p>
        <span>就诊信息</span>
        <span>
          <mt-switch v-model="value">是否初诊</mt-switch>
        </span>
      </p>
      <p>预约日期&nbsp;&nbsp;
        <span>{{dateValue}}</span>
        <span>{{onduty | showAMPM}}</span>
        <!--
        <input style="font-size:0.9rem;color:#aaa" readonly="readonly" v-model="dateValue "/>
        <input style="font-size:0.9rem;color:#aaa" readonly="readonly" v-model="onduty"/>
        -->
      </p>
      <p>选择时间
        <input readonly="readonly" v-model="radioValue" placeholder="请选择时间" @click="showSelectYuYueTime = true"/>
      <!--         <input class="setTime" type="text" v-model="pickerValueFrom" placeholder="开始时间"
          readonly="readonly"
          @click="openPickerFrom"
        />
        <i>--</i>
        <input class="setTime" type="text" v-model="pickerValueTo" placeholder="结束时间"
          readonly="readonly"
          @click="openPickerTo"
      />-->
      </p>
      <!-- 预留设置时间： @click="openPicker" -->
      <p>就诊科室<b>{{$route.query.SSKBMC}}</b></p>
      <!--<p>门诊类型<b>{{mzlx}}</b><input type="text" v-model="mzlx" readonly="readonly"/></p> -->
    </div>
    <div class="jzd_2">
      <p>就诊人信息
        <!-- <span @click="chgPatientShow">修改</span> @reSetPat="reSetPatInfo($event)"-->
        <nuxt-link tag="p" :to="{name:'wode-patientlist' }"><i class="iconfont icon-weibiaoti34" style="padding-left:6rem;float:right;font-size:1.5rem;color:#aaa"></i></nuxt-link>
      </p>
      <div class="patientDetail" v-if="patNum > 0">
        <p style="background:#fff;color:black">就诊人：{{patArr[0].PATIENT_NAME}}&nbsp;{{patArr[0].PATIENT_SEX}}&nbsp;{{patArr[0].PATIENT_AGE + '岁'}}&nbsp;&nbsp;{{patArr[0].PAYMENT_TYPE_NAME}}</p>
        <p>手机：{{patArr[0].PATIENT_MOBILE}}</p>
      </div>
      <div class="patientDetail_notify" v-else>
        <p v-if="!finishload">加载中...</p>
        <p v-else>暂无就诊人 <span @click="addPatient">点击添加</span></p>
      </div>
    </div>
    <div class="jzd_4" @click="saveYuYue">
      <p>立即预约</p>
    </div>
    <!--     <transition name="fade">
      <changePatient v-show="changePatientShow" :chgPatSh="hideCurr" @chgPatShRes="changePatientShowMeth($event)" @reSetPat="reSetPatInfo($event)"></changePatient>
    </transition> -->
    <!--     <transition name="fade">
      <doctorInfo v-show="checkDoctorInfo" :doctorId="doctorIdTemp" @chgDocInfoShow="checkDoctorInfoDo($event)"></doctorInfo>
    </transition> -->
    <mt-popup style="max-height:40vh;over-flow:auto;width:100vw"
      v-model="showSelectYuYueTime"
      popupTransition="popup-fade"
      position="bottom"
      closeOnClickModal="true"
      modal="true"
    > <!-- v-if="showSelectYuYueTime" -->
      <mt-radio class="selectTimeStyle"
        title="请选择预约时间段"
        v-model="radioValue"
        :options="options"
        @change="selectedYuYueTime"
      >
      </mt-radio>
    </mt-popup>
    <!--     <mt-popup
      v-model="checkYuyueResult"
      popupTransition="popup-fade"
      position="bottom"
      closeOnClickModal="true"
      modal="true"
    >
      <yyResult :doctorName="$route.query.docName" :yuyueResult="yyResult" :patientName="patArr[0].PATIENT_NAME" :yuyueDate="dateValue"></yyResult>
    </mt-popup> -->
    <!--     <template>
      <mt-datetime-picker
        ref="pickerFrom"
        type="time"
        yearFormat="{value} 年"
        monthFormat="{value} 月"
        dateFormat="{value} 日"
        hourFormat="{value} 时"
        @confirm="handleConfirmDate()"
        v-model="pickerValueFrom"
      >
      </mt-datetime-picker>
    </template>
    <template>
      <mt-datetime-picker
        ref="pickerTo"
        type="time"
        yearFormat="{value} 年"
        monthFormat="{value} 月"
        dateFormat="{value} 日"
        hourFormat="{value} 时"
        @confirm="handleConfirmDate()"
        v-model="pickerValueTo"
      >
      </mt-datetime-picker>
    </template> -->
    <transition name="fade">
      <nuxt-child></nuxt-child>
    </transition>
    <transition name="fade">
      <alert-tip :alertText="alertText" v-if="showAlert" @closeTip="closeTip"></alert-tip>
    </transition>
  </div>
</template>

<script>
import navTop from '~/components/common/navTop.vue';
import yyResult from '~/pages/yuyue/yuyueNotice';
import alertTip from '~/components/common/alertTip';

const { config } = window;

export default {
  data() {
    return {
      patNum: 0, // 该账户下就诊人数量
      finishload: false, // 是否加载完默认患者信息

      DATA3: {},
      DATA2: {},
      DATA1: {
        docid: `${this.$route.query.docid}`,
        exactdate: `${this.$route.query.dateValue}`,
        onduty: `${this.$route.query.onduty}`,
      },
      DATA: {
        exact_date: '2018-11-9', // 排班日期
        week_day: '', // 星期
        am_stay: '', // 上午是否排班y-是n-否
        pm_stay: '', // 下午是否排班y-是n-否
      },
      AAA: '',
      ts: this.newStore(),
      tq: this.getData(),
      // ------------------------------------
      checkYuyueResult: false,
      bkParam: 'bk',
      showaveter: `${config.SHOWAEVTER}`,
      radioValue: '',
      showSelectYuYueTime: false,
      options: [
      ],
      alertText: '',
      showAlert: false,
      transition: {
        name: 'right-slide',
        mode: 'out-in',
      },
      mzlx: '', // 门诊类型
      checkDoctorInfo: false, // 是否显示医生详情页
      hideCurr: 'hideCurr',
      SLOTAM: '', // 预约的时间段
      changePatientShow: false,
      dateValue: '', // 预约日期
      onduty: '',
      pickerValueFrom: '', // 设置的时间值, 选择日期插件用的日期值
      pickerValueTo: '', // 设置的时间值, 选择日期插件用的日期值
      headTitle: '添加预约',
      showBack: true,
      value: false,
      root: `${config.APIRoot}/doctor`,
      patArr: [{}, {}],
      doctorInfo: {},
      pbList: [],
      yyResult: false,
    };
  },
  components: {
    navTop, /* changePatient,  doctorInfo, */ alertTip, yyResult,
  },
  created() {
    this.getPatientDefaulty();
    const ca = this.caste();
    this.mzlx = ca.getCasteName(`${this.$route.query.ZYDJ}`);
    // this.DATA1.exactdate = this.getNowFormatDate(this.$route.query.dayCount);
    // this.dateValue = this.getNowFormatDate(this.$route.query.dayCount)
    // this.getyuyueDate(this.$route.query.dayCount);
    this.getDoctorPaibanInfo();

    //
    this.dateValue = `${this.$route.query.dateValue}`;
    this.onduty = `${this.$route.query.onduty}`;
    this.DATA1.exactdate = `${this.$route.query.dateValue}`;
    this.DATA1.onduty = `${this.$route.query.onduty}`;

    console.log(`----- yuyueAdd-onduty: ${this.$route.query.onduty}`);
    console.log(`----- yuyueAdd-exactdate: ${this.$route.query.dateValue}`);
  },
  destroyed() {
  },
  mounted() {
    // this.getDoctorPaibanInfo();
    // this.getPatientDefaulty();
  },
  methods: {
    //
    addPatient() {
      this.$router.push({
        name: 'wode-patientlist',
      });
    },
    selectedYuYueTime() {
      // 隐藏
      this.showSelectYuYueTime = false;
    },
    getPatientDefaulty() {
      this.tq.getPatientDefaulty(this.DATA2).then((ts) => {
        this.patArr = ts.d.DATAOBJ.DATA;
        this.patNum = this.patArr.length;
        this.finishload = true;
        console.log(JSON.stringify(ts.d));
      });
    },
    getDoctorPaibanInfo() {
      this.tq.getDoctorPaibanInfo(this.DATA1).then((ts) => {
        console.log(JSON.stringify(ts.d));
        this.pbList = ts.d.DATAOBJ.DATA;
        this.pbList.forEach((e) => {
          if (Number(e.LEAVENUM) > 0) {
            const opt = { label: '', value: '', disabled: false };
            opt.label = `${e.SLOTAM}(${e.STATUS}: ${e.LEAVENUM})`;
            opt.value = e.SLOTAM;
            this.options.push(opt);
          }
        });
      });
    },

    closeTip() {
      this.showAlert = false;
      this.$router.push('/yuyue/yuyueRecord');
    },
    // 切换查看医生详情
    checkDoctorInfoDo(msg) {
      this.checkDoctorInfo = msg;
    },
    // 数据参数定义出现奇异，导致数据渲染出现麻烦
    /*     reSetPatInfo(patinfo) {
      this.patArr[0] = patinfo;
    }, */
    //
    getyuyueDate(dayCount) {
      const date = new Date();
      const year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate() + Number(dayCount);
      if (month < 10) {
        month = `0${month}`;
      }
      if (day < 10) {
        day = `0${day}`;
      }
      this.dateValue = `${year}-${month}-${day}`;
      this.onduty = `${this.$route.query.onduty}`;
      this.DATA1.exactdate = `${year}-${month}-${day}`;
      this.DATA1.onduty = `${this.$route.query.onduty}`;
    },
    getNowFormatDate(dayCount) {
      const dt = new Date();
      dt.setDate(dt.getDate() + Number(dayCount));
      const seperator1 = '-';
      const year = dt.getFullYear();
      let month = dt.getMonth() + 1;
      let strDate = dt.getDate();
      if (month >= 1 && month <= 9) {
        month = `0${month}`;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = `0${strDate}`;
      }
      const currentdate = year + seperator1 + month + seperator1 + strDate;
      return currentdate;
    },
    // 隐藏患者列表
    changePatientShowMeth(msg) {
      this.changePatientShow = false;
    },
    // 显示患者列表
    chgPatientShow() {
      this.changePatientShow = true;
    },
    // 回传设置的时间给变量
    handleConfirmDate() {
      console.log(`打印设置的时间：${this.pickerValueFrom}`);
    },
    // 打开设置时间页面
    openPickerFrom() {
      this.$refs.pickerFrom.open();
    },
    // 打开设置时间页面
    openPickerTo() {
      this.$refs.pickerTo.open();
    },
    saveYuYue() {
      // 添加就诊人过滤
      if (this.patArr.length == 0 || this.patArr[0].PATIENT_ID == '' || this.patArr[0].PATIENT_ID == 'undefined') {
        this.$messagebox('添加提示', '患者信息有误，请重新添加');
        return;
      }
      if (this.dateValue == '' || this.dateValue == '--') {
        this.$messagebox('添加提示', '时间设置有误');
        return;
      }
      if (this.radioValue == '') {
        this.$messagebox('添加提示', '日期设置有误');
        return;
      }

      this.DATA3 = {
        patient_id: `${this.patArr[0].PATIENT_ID}`, // 就诊人ID
        patient_name: `${this.patArr[0].PATIENT_NAME}`,
        patient_pic_url: `${this.patArr[0].PATIENT_PIC_URL}`, // 患者头像路径
        patient_age: `${this.patArr[0].PATIENT_AGE}`,
        patient_sex: `${this.patArr[0].PATIENT_SEX}`,
        patient_mobile: `${this.patArr[0].PATIENT_MOBILE}`,
        patient_blhm: `${this.patArr[0].PATIENT_BLHM}`,
        patient_addr: `${sessionStorage.getItem('country')}/${sessionStorage.getItem('province')}/${sessionStorage.getItem('city')}`, // 当前登录账户地址
        cost_type: 'zf', // zf自费、yb医保, 目前默认均是自费
        doctor_name: `${this.$route.query.docName}`,
        doctor_id: `${this.$route.query.docid}`,
        doctor_pic_url: `${this.$route.query.DOCTOR_PIC_URL}`, // 医师头像路径
        sskbmc: `${this.$route.query.SSKBMC}`, // 科室
        zydj: `${this.$route.query.ZYDJ}`, // 职业等级 zr主任医师、 fzr副主任医师
        ssyymc: '', // 医院网址
        pre_time: `${this.dateValue}`, // 预约日期
        pre_type: `${this.$route.query.ZYDJ}`, // zj 专家门诊, pt 普通门诊
        pre_cost: '0', // 门诊费
        slot_am: `${this.radioValue}`, // 上午预约时间段
        slot_pm: '', // 下午预约时间段(备用)
        isfirst: `${this.value ? 'f' : 's'}`,
      };
      this.tq.saveYuYue(this.DATA3).then((ts) => {
        const re = ts.d.DATAOBJ.DATA.code;
        if (re == '322') {
          this.$messagebox('预约提示', ts.d.DATAOBJ.DATA.msg);
          return;
        }
        this.$router.push({
          name: 'yuyue-yuyueNotice',
          query: {
            doctorName: this.$route.query.docName,
            yuyueResult: `${ts.d.RESULT}`,
            patientName: this.patArr[0].PATIENT_NAME,
            yuyueDate: this.dateValue,
          },
        });
      });
    },
  },
  filters: {
    showAMPM(value) {
      if (!value) return '';
      switch (value) {
        case 'am':
          return '上午';
        case 'pm':
          return '下午';
        default:
          return '';
      }
    },
  },
  Watch() {

  },
};
</script>

<style lang="stylus" scoped>
.selectTimeStyleselectTimeStyleselectTimeStyle
  width 100vw
.setTime
    width 6rem
    text-align center
    margin-left .1rem
.mint-switch-core::after
    height 20px
.mint-switch-core::before
    height 20px
.mint-switch-core
    height 23px
.jzd_0
    height 3rem
    line-height 3rem
    font-size 1rem
    text-align center
    background #eaf24b
.jzd_1
    height 3rem
    line-height 3rem
    margin 0 1rem
    font-size 1rem
    img
        width 4rem
        height 4rem
        border-radius 50%
    span
        float left
        display inline-block
        &:first-child
            width 4rem
            height 4rem
            background #aaa
            border-radius 50%
            margin 0.5rem
            text-align center
            line-height 4rem
        &:last-child
            width 100%
            p
                height 1rem
                line-height 1rem
                border none
                margin 1rem 0
                &:last-child
                    max-width 100vw
                    overflow: hidden;
                    text-overflow:ellipsis;
                    white-space: nowrap;
                    color #aaa
                    font-size 0.9rem
.jzd_2
    p
        height 3rem
        line-height 3rem
        font-size 1rem
        padding 0 0.8rem
        border-bottom 1px solid #eee

        &:first-child
            display flex
            justify-content space-between
            background #f1f1f1
            font-size 0.9rem
            color #aaa
        b
            color #aaa
            margin-left 1rem
            font-size 0.9rem
        .patientDetail
            p
              background #fff
              color #333
        .patientDetail_notify
            text-align center
            p
              color #333
              span
                margin-left .5rem
                color #26a2ff


.jzd_4
    position fixed
    bottom 0
    background #26a2ff
    font-size 1rem
    color #fff
    width 100%
    text-align center
    padding 0.8rem 0
.fade-enter-active, .fade-leave-active {
  transition: opacity .8s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

